﻿@model IEnumerable<Trifecta.Models.Merchant>

@{
    ViewBag.Title = "Map";
}

<script src="http://maps.google.com/maps/api/js?sensor=true" type="text/javascript"></script>

<!-- This css is to ensure that the google map contols (zoom bar etc) show and size correctly. -->
<style>
    #map_canvas img {
        max-width: none;
    }
</style>

<!-- This css is to give a nice big popup "info window" when a marker is clicked on the map -->
<style>
    .infoDiv {
        height: 200px;
        width: 300px;
        -webkit-user-select: none;
        background-color: white;
    }
</style>

<!-- This is the div that will contain the Google Map -->
<div id="map_canvas" style="height: 600px;"></div>

<!-- Enclose the Javascript in a "section" so that it is rendered in the correct order after scripts have been loaded etc -->
@section scripts {
    <section class="scripts">
        <script type="text/javascript">
    //Converting a C# Model into javascript json object.
            @*var data = [];
            @foreach (var item in Model) {
                <text>
            data.push({ "PlaceName": "@item.Merchant_Name", "OpenHours": "", "GeoLong": "@item.Geo_Location.XCoordinate.ToString()", "GeoLat": "@item.Geo_Location.YCoordinate.ToString()" });
            </text>
            }*@


    //This code tells the browser to execute the "Initialize" method only when the complete document model has been loaded.
    $(document).ready(function () {
        Initialize();
    });

    // Where all the fun happens
    function Initialize() {

        // Google has tweaked their interface somewhat - this tells the api to use that new UI
        google.maps.visualRefresh = true;
        var Minnesota = new google.maps.LatLng(44.9833340, -93.2666700);

        // These are options that set initial zoom level, where the map is centered globally to start, and the type of map to show
        var mapOptions = {
            zoom: 10,
            center: Minnesota,
            mapTypeId: google.maps.MapTypeId.G_NORMAL_MAP
        };

        // This makes the div with id "map_canvas" a google map
        var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);

        // This shows adding a simple pin "marker" - this happens to be the Tate Gallery in Liverpool!
        var myLatlng = new google.maps.LatLng(-76.0798010, 43.0385130);

        var marker = new google.maps.Marker({
            position: myLatlng,
            map: map,
            title: 'Tate Gallery'
        });

        // You can make markers different colors...  google it up!
        @*marker.setIcon('http://maps.google.com/mapfiles/ms/icons/green-dot.png')
        var image = "../images/logosmall.png";
        var image = {
            url: "",
            image.size =new google.maps.Size(60, 60)
        };*@
        var image = new google.maps.MarkerImage("../images/marker_black.png");
        image.iconSize = new google.maps.Size(20, 20);
        // a sample list of JSON encoded data of places to visit in Liverpool, UK
        // you can either make up a JSON list server side, or call it from a controller using JSONResult
        var data = [
                  { "Id": 1, "PlaceName": "Shiloh Temple", "GeoLong": "44.9989740", "GeoLat": "-93.2959780" },
                  { "Id": 2, "PlaceName": "Zanewood Rec Center ", "GeoLong": "45.0824560", "GeoLat": "-93.3560120" },
                  { "Id": 3, "PlaceName": "North Commons Park", "GeoLong": "44.9969780", "GeoLat": "-93.3025730" },
                  { "Id": 4, "PlaceName": "Sabathani Community center", "GeoLong": "44.9918260", "GeoLat": "-93.3073950" },
                  { "Id": 5, "PlaceName": "Urban Ventures Fathering Center", "GeoLong": "44.9475070", "GeoLat": "-93.2697690" },
                  { "Id": 6, "PlaceName": "Trifeta Source Distribution Center", "GeoLong": "39.0835830", "GeoLat": "-94.6510470" },
                  { "Id": 7, "PlaceName": "St Paul Hmong Alliance Church", "GeoLong": "44.9949830", "GeoLat": "-93.0837550" },
                  { "Id": 8, "PlaceName": "St Paul Hmong Alliance Church (MLK Center)", "GeoLong": "44.9493920", "GeoLat": "-93.1229610" },
                  { "Id": 9, "PlaceName": "Young Adult Koinonia", "GeoLong": "44.9575760", "GeoLat": "-93.1226950" },
                  { "Id": 10, "PlaceName": "Center for Excellence in Urban Teaching School of Education, Hamline University", "GeoLong": "44.9664980", "GeoLat": "-93.1657970" }
        ];

        // Using the JQuery "each" selector to iterate through the JSON list and drop marker pins
        $.each(data, function (i, item) {
            var marker = new google.maps.Marker({
                'position': new google.maps.LatLng(item.GeoLong, item.GeoLat),
                'map': map,
                'icon': image,
                'title': item.PlaceName
            });

            // Make the marker-pin blue!
            
            @* marker.setIcon('..\images\logosmall.jpg')*@

            // put in some information about each json object - in this case, the opening hours.
            var infowindow = new google.maps.InfoWindow({
                content: "<div class='infoDiv'><h2>" + item.PlaceName + "</h2>" + "<div><h4>Opening hours: " + item.OpeningHours + "</h4></div></div>"
            });

            // finally hook up an "OnClick" listener to the map so it pops up out info-window when the marker-pin is clicked!
            google.maps.event.addListener(marker, 'click', function () {
                infowindow.open(map, marker);
            });

        })
    }


        </script>
    </section>
}
